<template>
  <div class="my-table">
    <!-- table -->
    <el-table
      :data="tableData"
      style="width: 100%"
      stripe
      border
      is-scrolling-none
      highlight-current-row
      ref="singleTable"
      @current-change="handleCurrentTableChange"
    >
      <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
      <template v-for="(item,index) in tableOption">
        <el-table-column
          v-if="item.slotName"
          align="center"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :key="index"
        >
        <template slot-scope="scope">
           <slot v-bind:[item.slotName]="scope.row" :name="item.slotName"></slot>
        </template>
        </el-table-column>
        <el-table-column
          v-else
          align="center"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :key="index"
          show-overflow-tooltip
        ></el-table-column>
      </template>
    </el-table>
    <!-- pagination -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 0,
      name: "zs",
    };
  },
  props: {
    tableData: {
      type: Array,
      default: [],
    },
    tableOption: {
      type: Array,
      default: [],
    },
  },
  created() {
    console.log(this.tableData);
    console.log(this.tableOption);
  },

  methods: {
    // 点击表格项
    handleCurrentTableChange(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    // 页面大小改变
    handleSizeChange() {},
    // 页码改变
    handleCurrentChange() {},
  },
};
</script>

<style scoped lang='less'>
/deep/ .el-table__body-wrapper {
  max-height: 555px;
  overflow-y: auto;
}
/deep/.el-table__body-wrapper::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  //   box-shadow: inset 0 0 5px rgba(237,237,237);
  background: #ccc;
}
/deep/.el-table__body-wrapper::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  //   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ededed;
}
</style>
